<template>
    <div class="app-container">
      <!--工具栏-->
      <div class="head-container">

        <div v-if="crud.props.searchToggle">
          <!-- 搜索 -->
          <el-form label-width="70px" size="small" v-formkey="{query:crud.toQuery}">
            <el-row :gutter="10">
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label="开始月份">
                  <el-date-picker
                    v-model="startDate"
                    type="month"
                    size="small"
                    class="date-item"
                    style="width: 100%;"
                    format="yyyy - M"
                    value-format="yyyy-M" @change="changeStartDate"
                  />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label="结束月份">
                  <el-date-picker
                    v-model="endDate"
                    type="month"
                    size="small"
                    class="date-item"
                    style="width: 100%;"
                    format="yyyy - M"
                    value-format="yyyy-M" @change="changeEndDate"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <rrOperation :crud="crud"/>
        </div>
        <crudOperation :permission="permission"/>
      </div>
      <div class="body-container">
        <!--表格渲染-->

        <el-table ref="table"  border
                  height="700"
                  show-summary
                  v-loading="crud.loading"
                  :data="crud.data"
                  size="small"
                  style="width: 100%;"
                  :summary-method="crud.sumRow"
                  @row-click="crud.selectRow"
                  :row-style="crud.rowClass"
                  :row-class-name="crud.tableRowClassName"
                  @selection-change="crud.selectionChangeHandler"
                  >
          <el-table-column :render-header="crud.renderHeader" type="selection" width="60" />
          <el-table-column :render-header="crud.renderHeader" type="index" width="60" label="序号"/>
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('deptName')" prop="deptName" label="部门" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('dateStr')" prop="dateStr" label="日期" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('userName')" prop="userName" label="人员" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('scheduleName')" prop="scheduleName" label="班次" />

          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('laterCount')" prop="laterCount" label="迟到次数" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('earlierCount')" prop="earlierCount" label="早退次数" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('missCount')" prop="missCount" label="漏打卡次数" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('overtimeDaySum')" prop="overtimeDaySum" label="加班天数" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('overtimeHourSum')" prop="overtimeHourSum" label="加班小时数" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('missionLeaveDaySum')" prop="missionLeaveDaySum" label="公出天数" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('missionLeaveHourSum')" prop="missionLeaveHourSum" label="公出小时数" />
          <el-table-column :render-header="crud.renderHeader"   label="蹲点签到照片" >
            <template scope="{row}">
              <el-image v-if="row.squatPointSignInImgUrl" :preview-src-list="['//images.weserv.nl/?url='+row.squatPointSignInImgUrl]" :src="'//images.weserv.nl/?url='+row.squatPointSignInImgUrl" style="width: 100px;height: 100px;" />
            </template>
          </el-table-column>
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('missionLeaveDaySum')" prop="squatPointCount" label="蹲点次数" />
          <el-table-column :render-header="crud.renderHeader"   label="陌拜签到照片" >
            <template scope="{row}">
              <el-image v-if="row.unfamiliarCustomerVisitSignInImgUrl" :preview-src-list="['//images.weserv.nl/?url='+row.unfamiliarCustomerVisitSignInImgUrl]" :src="'//images.weserv.nl/?url='+row.unfamiliarCustomerVisitSignInImgUrl" style="width: 100px;height: 100px;" />
            </template>
          </el-table-column>
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('missionLeaveHourSum')" prop="unfamiliarCustomerVisitCount" label="陌拜次数" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('accidentLeaveDaySum')" prop="accidentLeaveDaySum" label="事假天数" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('accidentLeaveHourSum')" prop="accidentLeaveHourSum" label="事假小时数" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('illLeaveDaySum')" prop="illLeaveDaySum" label="病假天数" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('illLeaveHourSum')" prop="illLeaveHourSum" label="病假小时数" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('birthLeaveDaySum')" prop="birthLeaveDaySum" label="产假天数" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('birthLeaveHourSum')" prop="birthLeaveHourSum" label="产假小时数" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('withBirthLeaveDaySum')" prop="withBirthLeaveDaySum" label="陪产天数" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('withBirthLeaveHourSum')" prop="withBirthLeaveHourSum" label="陪产小时数" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('vacationLeaveDaySum')" prop="vacationLeaveDaySum" label="年假天数" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('vacationLeaveHourSum')" prop="vacationLeaveHourSum" label="年假小时数" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('marriageLeaveDaySum')" prop="marriageLeaveDaySum" label="婚假天数" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('marriageLeaveHourSum')" prop="marriageLeaveHourSum" label="婚假小时数" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('leaveDaySum')" prop="leaveDaySum" label="合计请假" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('leaveHourSum')" prop="leaveHourSum" label="请假小时数" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('deductedLeaveDaySum')" prop="deductedLeaveDaySum" label="扣减假天数" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('deductedLeaveHourSum')" prop="deductedLeaveHourSum" label="扣减假小时数" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('otherLeaveDaySum')" prop="otherLeaveDaySum" label="其他假天数" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('otherLeaveHourSum')" prop="otherLeaveHourSum" label="其他假小时数" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('laterSignCount')" prop="laterSignCount" label="补卡次数" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('laterSignReason')" prop="laterSignReason" label="补卡原因" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('laterSignTime')" prop="laterSignTime" label="补卡时间" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('restTime')" prop="restTime" label="班次休息时间" >
            <template slot-scope="scope" v-if="scope.row.restTime">
              <span v-for="(item,index) in scope.row.restTime.split(',')" :key="index">
                {{ dict.label.t_executive_shift_rest_time_def[item] }}
              </span>
            </template>
          </el-table-column>
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('shiftLeaveDaySum')" prop="shiftLeaveDaySum" label="调休天数" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('shiftLeaveHourSum')" prop="shiftLeaveHourSum" label="调休小时数" />

          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('signInBeginTime')" prop="signInBeginTime" label="班次签到开始时间" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('signInPlace')" prop="signInPlace" label="签到地点">
            <template slot-scope="scope">
              {{ scope.row.signInPlace }}
            </template>
          </el-table-column>
          <el-table-column :render-header="crud.renderHeader" label="签到照片" >
            <template scope="{row}">
              <el-image v-if="row.signInImgUrl" :preview-src-list="['//images.weserv.nl/?url='+row.signInImgUrl]" :src="'//images.weserv.nl/?url='+row.signInImgUrl" style="width: 100px;height: 100px;" />
            </template>
          </el-table-column>
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('signInTime')" prop="signInTime" label="签到时间" />
          <el-table-column :render-header="crud.renderHeader"  label="签退照片" >
            <template scope="{row}">
              <el-image v-if="row.signOutImgUrl" :preview-src-list="['//images.weserv.nl/?url='+row.signOutImgUrl]" :src="'//images.weserv.nl/?url='+row.signOutImgUrl" style="width: 100px;height: 100px;" />
            </template>
          </el-table-column>
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('signOutEndTime')" prop="signOutEndTime" label="班次签退结束时间" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('signOutPlace')" prop="signOutPlace" label="签退地点" >
            <template slot-scope="scope">
              {{ scope.row.signOutPlace }}
            </template>
          </el-table-column>
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('signOutTime')" prop="signOutTime" label="签退时间" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('status')" prop="status" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.status==0"></span>
              <span v-if="scope.row.status==2">正常</span>
              <span v-if="scope.row.status==3">异常</span>
            </template>
          </el-table-column>
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('checkedCount')" prop="checkedCount" label="查岗次数" />
          <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('meetingCount')" prop="meetingCount" label="会议次数" />
        </el-table>
      </div>
    </div>
  </template>

  <script>
    import crudBasGoods from '@/api/erp/classesIndex'
    import CRUD, {crud, form, header, presenter} from '@crud/crud'
    import rrOperation from '@crud/RR.operation'
    import crudOperation from '@crud/CRUD.operation'
    import udOperation from '@crud/UD.operation'
    import pagination from '@crud/Pagination'
    import {getDepts} from "@/api/system/dept";
    import Treeselect from '@riophae/vue-treeselect'
    // 高德
    // import AMapLoader from "@amap/amap-jsapi-loader";
    // window._AMapSecurityConfig = {
    //   // 安全密钥
    //   securityJsCode: "c3402fcef23c9fad176f73f495507ef9",
    // };
    // crud交由presenter持有
    const defaultCrud = CRUD({
      title: '考勤记录明细', url: '/api/reportAttendance/detail', sort: 'id,desc',
      query:{
            startYear:"",
            startMonth:"",
            endYear:"",
            endMonth:"",
            userId:''
          },
          // 阻止初始化刷新
          queryOnPresenterCreated:false,
        crudMethod: {...crudBasGoods},
        optShow: {
        add: false,
        edit: false,
        del: false,
      },
      props:{
        tableColumns:[
          'name',
          'code'
        ]
      }
    });
    const defaultForm = {
    };
    export default {
      name: 'kaoqClassesDetail',
      components: {pagination, crudOperation, rrOperation, udOperation,Treeselect},
      mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
      dicts: ['t_bas_goods_type', 'common_status', 't_bas_goods_buy_sale_type', 'common_yes_or_no','t_executive_shift_rest_time_def',
        't_bas_goods_price_type', 't_bas_goods_expiration_unit', 't_bas_goods_level', 't_bas_goods_source_type','dict_check_attendance'],
      data() {
        return {
          multiple:true,
          permission: {
            //add 不添加权限，这个add按钮自定义
            add: ['admin'],
            edit: ['admin', 'basGoods:edit'],
            del: ['admin', 'basGoods:del'],
            enable: ['admin', 'basGoods:enable'],
            disable: ['admin', 'basGoods:disable'],
          },
          startDate:"",
          endDate:"",
          rules: {},
          date:'',
          deptList:[],
          query:{},
          address:''
        }
      },
      watch: {
      },
      activated() {

        const id = sessionStorage.getItem(this.$options.name + 'Id')
        //记录本次进入的Id
        this.date = this.$router.currentRoute.query.year+'-'+this.$router.currentRoute.query.month
        sessionStorage.setItem(this.$options.name + 'Id', this.date+this.$router.currentRoute.params.id)

        if (id !== this.date+this.$router.currentRoute.params.id ||  !this.crud.data.length) {
            console.log(this.$router)
            this.crud.query.startYear=this.$router.currentRoute.query.startYear
            this.crud.query.startMonth=this.$router.currentRoute.query.startMonth
            this.crud.query.endYear=this.$router.currentRoute.query.endYear
            this.crud.query.endMonth=this.$router.currentRoute.query.endMonth
            this.crud.query.userId=this.$router.currentRoute.params.id
            this.query = this.crud.query
            //this.crud.query = this.query
            this.startDate=this.$router.currentRoute.query.startYear+'-'+this.$router.currentRoute.query.startMonth
            this.endDate=this.$router.currentRoute.query.endYear+'-'+this.$router.currentRoute.query.endMonth

            this.crud.toQuery()
        }

        },
      updated() {
        this.$nextTick(() => {
          this.$refs.table.doLayout()
        })},
      created() {
        this.getdeptList()
      },
      methods: {

        // getgps(val){
        //   AMapLoader.load({
        //       key:"8ba9aaa5a69d690ca594415c7af28a88",
        //       version:"2.0",
        //       plugins:["AMap.Geocoder",],
        //         }).then((AMap)=>{

        //           const that=this
        //           AMap.plugin('AMap.Geocoder', function() {
        //             console.log(that,'hhhhhhhhhhhhh');
        //           var geocoder = new AMap.Geocoder({city: '010' })
        //               geocoder.getAddress(val.split(','), function(status, result) {
        //           if (status === 'complete' && result.info === 'OK') {

        //             that.address= result.regeocode.formattedAddress

        //           }
        //           })
        //         })
        //       })

        // },
        changeStartDate(val){
          this.$set(this.query,'startYear',val.substr(0,4))
          this.$set(this.query,'startMonth',val.substr(5,2))
          // this.query.year= val.substr(0,4)
          // this.query.month= val.substr(5,2)
        },
        changeEndDate(val){
          this.$set(this.query,'endYear',val.substr(0,4))
          this.$set(this.query,'endMonth',val.substr(5,2))
          // this.query.year= val.substr(0,4)
          // this.query.month= val.substr(5,2)
        },
        getdeptList() {
          getDepts({status: 1}).then(res => {
        this.deptList = res
      })
      },
        getNoStr(val, type, prop) {
        let str = "";
        val.forEach((item) => {
          const itemNode = this.getTreeName(this[type], item);
          str = this.getNode(itemNode, str);
        });
        this.query[prop] = str;
      },
      getTreeName(treeList, id) {
        let _this = this;
        for (let i = 0; i < treeList.length; i++) {
          let treeItem = treeList[i];
          if (treeItem.id === id) {
            return treeItem;
          } else {
            if (treeItem.children && treeItem.children.length > 0) {
              let res = _this.getTreeName(treeItem.children, id);
              if (res) {
                return res;
              }
            }
          }
        }
      },
      getNode(node, str) {
        if (node.children) {
          for (let i = 0; i < node.children.length; i++) {
            str = this.getNode(node.children[i], str);
          }
        }
        return (str += node.id + ",");
      },
      normalizer(node) {
        //去掉children=[]的children属性
        if (node.children == null || node.children.length == 0) {
          delete node.children;
        }
        return {
          id: node.id,
          label: node.name,
          children: node.children,
        };
      },
        // 获取数据前设置好接口地址
        [CRUD.HOOK.beforeRefresh]() {
          console.log(this.query)
          this.crud.query = this.query
          return true
        }, // 新增与编辑前做的操作
        [CRUD.HOOK.afterToCU](crud, form) {
        },
        //添加提交
        [CRUD.HOOK.afterValidateCU](crud) {
          if (crud.form.dataScope === '自定义' && crud.form.depts.length === 0) {
            this.$message({
              message: '自定义数据权限不能为空',
              type: 'warning'
            })
            return false
          } else if (crud.form.dataScope === '自定义') {
            const depts = []
            crud.form.depts.forEach(function (data, index) {
              const dept = {id: data}
              depts.push(dept)
            })
            crud.form.depts = depts
          } else {
            crud.form.depts = []
          }
          return true
        }
      }
    }
  </script>

  <style scoped>
    .table-img {
      display: inline-block;
      text-align: center;
      background: #ccc;
      color: #fff;
      white-space: nowrap;
      position: relative;
      overflow: hidden;
      vertical-align: middle;
      width: 32px;
      height: 32px;
      line-height: 32px;
    }
  </style>
